<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/list.css">
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="./images/logo_003.jpg" alt="">
        <div class="content">
            <span>我的博客系统</span>
            <div class="opts">
                <a href="./blog_list.html">主页</a>
                <a href="./blog_eidt.html">写博客</a>
                <a href="javascript:void(0);" id="a_list_logout">注销</a>
                <!-- javascript:void(0) 表示a标签的默认响应不做任何处理 -->
            </div>

        </div>
    </div>
    <!-- 正文部分 -->
    <div class="container">
        <!-- 左边区域 -->
        <div class="container-left">
            <div class="card">
                <img src="./images/nz1.jpeg" alt="">
                <!-- 用户名 -->
                <h3 id="h_list_username"></h3>
                <a href="#">Github</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!-- 右边区域 -->
        <div class="container-right">
            
        </div>
    </div>
</body>
<!-- 引入jquery -->
<script src = "js/jquery-3.6.3.min.js"></script>
<!-- 引入common.js，用于处理时间格式的 -->
<script src = 'js/common.js'></script>
<script>
    // 目标：只要博客页面一启动，就发送ajax请求给后端，同时回调函数获取响应的用户信息，设置到前端的控件上
    //实现功能2：用户控件上显示用户信息
    $(function(){
        //1、发送ajax请求获取响应数据
        $.ajax({
            type:'get',
            url:'user',
            //回调函数
            //HTTP状态码返回为200的时候调用
            success : function(respData){
                if(respData.code == 0){
                    //成功
                    //获取从后端返回的User信息
                    let user = respData.data;
                    //给前端的控件上设置该用户信息
                    $('#h_list_username').html(user.username);
                }else{
                    //失败
                }
            },
            //HTTP返回状态码不是200的时候都会调用error
            error : function(){
                console.log('访问出现问题.');
            },
            //403状态可以调用error，但是有一个更加具体的方法statusCode，专门为不同的HTTP状态码定义不同的方法
            statusCode : {
                403:function(){
                    //打印日志并跳转到登录界面
                    console.log('用户无权访问，强制跳转到登录界面');
                    location.assign('blog_login.html');
                }
            }
        });

        //实现功能3：页面一加载就进行博客列表的获取
        $.ajax({
            type:'get',
            url:'blog',
            //回调方法
            success:function(respData){
                //根据自定义的状态码处理
                if(respData.code == 0){
                    //成功，构造文章列表：构造一个函数
                    buildArticlelList(respData.data);
                }else{
                    //失败
                    alert(respData.message);
                }
            },
            error:function(respData){
                console.log("访问出现错误");
            },            
            statusCode:{
                403:function(){
                    //未登录状态：强制让用户跳转到登录界面
                    location.assign('blog_login.html');
                }
            }
        });
        // 构建文章列表：data是一个集合
        function buildArticlelList(data){           
            //如果集合为空
            if(data.length == 0 || data == null){
                //当文章列表为空时
                let htmlString = '<h3>没有文章，快发布一篇吧！</h3>'
                $('#container-right').html(htmlString);
                return;
            }
            //说明文章列表不为空：遍历集合方式1：
            for(let i=0;i<data.length;i++){
                let blogItem = data[i];
                // 对对应的控件进行相应的赋值
                let htmlString = ' <div class="blog-content">'
                    + ' <div class="blog-title">'
                    +   blogItem.title
                    + ' </div>'
                    + ' <div class="blog-datetime">'
                    +   formatDate(blogItem.createTime)
                    + ' </div>'
                    + ' <div class="content">'
                    +   blogItem.content
                    + ' </div>'
                    + ' <div class="aEl">'
                    + ' <a href="./blog_details.html?blog_Id='+blogItem.id+'">+查看全文 &gt;&gt; </a>'
                    + ' </div>'
                    + ' <hr>'                   
                    + ' </div>';
                    // console.log(htmlString);
                    //这里用append,表示追加元素  .html()表示只添加一条数据
                $('.container-right').append(htmlString);
            }
            //遍历集合方式2：data是要遍历的数组或集合
            // data.forEach(element=>{
            //     //element相当于data[i]
            // })            
        }

        // 功能7：为注销按钮绑定事件
        $('#a_list_logout').click(function(){
            //发送ajax请求
            $.ajax({
                type: 'type',
                url : 'logout',
                success : function(respData){
                    //成功
                    if(respData.code == 0){
                        //跳转到登录页面
                        location.assign('nlog_login.html');
                    }else{
                        //失败
                        alert(respData.message);
                    }
                },
                error : function(){
                    console.log('访问出现问题');
                }
            })
        });
    })
</script>
</html>


